<template>
  <div class="container">
    <el-row class="">
      <el-col :span="16" align="left">
        <el-input clearable v-model="search.awardName" placeholder="奖项名称" style="width: 120px; margin-right: 15px">
        </el-input>

        <el-select clearable  @change="changeLevel" v-model="search.awardLevelId" placeholder="获奖级别">
          <el-option :label="item.itemText" :value="item.itemValue" :key="item.itemValue"
            v-for="item in awardLevelList" />
        </el-select>
        <el-select clearable  @change="changeClass"  v-model="search.awardClassId"  placeholder="获奖类别">
          <el-option :label="item.itemText" :value="item.itemValue" :key="item.itemValue"
            v-for="item in awardCategoryList" />
        </el-select>
<!--        <el-select clearable v-model="search.awardGradeId" placeholder="获奖等级">
          <el-option :label="item.itemText" :value="item.itemValue" :key="item.itemValue"
            v-for="item in awardGradeyList" />
        </el-select>-->
            <el-select clearable @change="changeGrade" v-model="search.awardGradeId"  placeholder="获奖等级">
              <el-option :label="item.itemText" :value="item.itemValue"
                         :key="item.itemValue" v-for="item in awardGradeyList" />
            </el-select>

        <el-button class="ordinary" @click="getTableList">搜索</el-button>
      </el-col>
      <el-col :span="8" align="right">
        <el-button class="unlock" @click="getUnlockBtn()" v-limit="'KJSL:KJCG:KJJX:UNLOCK'">解锁</el-button>
        <el-button class="lock" @click="getLockBtn()"  v-limit="'KJSL:KJCG:KJJX:LOCK'">锁定</el-button>
        <el-button class="ordinary" @click="getExportBtn()" v-limit="'KJSL:KJCG:KJJX:EXPERT'">批量导出</el-button>
        <el-button type="danger" @click="handleDetect()" v-limit="'KJSL:KJCG:KJJX:DELETE'">批量删除</el-button>
        <el-button type="primary" @click="handleAdd()" v-limit="'KJSL:KJCG:KJJX:ADD'">新增</el-button>
      </el-col>
    </el-row>
    <div>
      <Table :loading="isLoading" :tableArr="tableDate" :pagination="pagination" :columns="columns"
       @selectItem="getCurrentList" :total="pagination.total" @delectTable="delectIds" @currentChange="currentChange" @sizeChange="sizeChange">

        <template #status="{ row }">
          <span v-if="row.isLock == 1">已锁定</span>
          <span v-else>
            <span v-if="row.status == 0" style="color: #FFC783">待确认</span>
            <span v-if="row.status == 1" style="color: #B5F1FF">已确定</span>
            <span v-if="row.status == 2" style="color: #B5F1FF">正常</span>
          </span>
        </template>
        <template #operate="{ row }">
          <el-button size="small" class="ordinary" v-show="row.updateFlag" :key="row.id + 'bj'" :disabled="row.isLock == 1"  v-limit="'KJSL:KJCG:KJJX:EDIT'"
            @click="handleEdit(row)">编辑</el-button>
          <el-button size="small" class="ordinary" :key="row.id + 'bj'"
                     @click="handleDetail(row)">详情</el-button>
          <el-button v-if="row.status == '0'" size="small" type="primary" :key="row.id + 'qr'" :disabled="row.isLock == 1"
            @click="handleConfirm(row)" v-limit="'KJSL:KJCG:KJJX:CONFIRM'">确认</el-button>
        </template>
      </Table>
    </div>
    <InfoDialog :dialogVisable="infoDialog" :id="id" :flag="flag" @changeDialog="changeDialog"></InfoDialog>
    <InfoDialogxq :dialogVisablexq="infoDialogxq" :id="id" :flag="flag" @changeDialogxq="changeDialogxq"></InfoDialogxq>
  </div>
</template>
<script>
import {
getConfirm,
getDelect,
getDictionary,
getExport,
getLock,
getTable,
getUnit,
getUnlock,
} from "@/views/science/api/technologyawards";
import SelectOption from "@/views/science/components/selectOption/index.vue";
import Table from "@/views/science/components/table/TableDate.vue";
import { Modals, tips } from "@/views/science/components/tips/tips";
import InfoDialog from "@/views/science/payoffs/technologyawards/InfoDialog.vue";
import InfoDialogxq from "@/views/science/payoffs/technologyawards/InfoDialogxq.vue";
import { onMounted, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { ElMessage } from 'element-plus';
import tableHead from "./tableHeader.json";

export default {
  components: {
    SelectOption,
    Table,
    InfoDialog,
    InfoDialogxq,
  },
  setup() {
    const store = useStore();

    // 发送请求
    onMounted(() => {
      // 获取数据字典
      getCodeList();
      // 获取单位
      getUnitList();
      // 列表信息table
      getTableList();
    });

    let data = reactive({
      id: "",
      flag: 1,
      infoDialog: false,
      ids: [],
      pagination: { page: 1, limit: 10, total: 0 }, //分页
      isLoading: false,
      awardLevelList: [],
      awardCategoryList: [],
      awardGradeyList: [],
      awardList: [], //软著状态
      tableDate: [],
      columns: tableHead.technologyawardsHeader,
      search: {
        awardName: "",
        awardLevelId: "",
        awardClassId: "",
        awardGradeId: "",
      },
      selectedRows: [],
      infoDialogxq: false,
    });

    let changeLevel = (id) => {
      let itemText = data.awardLevelList.find((item) => item.itemValue == id).itemText;
      data.search.awardLevel = itemText;
      data.awardCategoryList = data.awardLevelList.find((item) => item.itemValue == id).children;
      data.search.awardClass = ''
      data.search.awardClassId = ''
      data.search.awardGrade = ''
      data.search.awardGradeId = ''
    };

    let changeClass = (id) => {
      let itemText = data.awardCategoryList.find((item) => item.itemValue == id).itemText;
      data.search.awardClass = itemText;
      data.awardGradeyList = data.awardCategoryList.find((item) => item.itemValue == id).children;
      data.search.awardGrade = ''
      data.search.awardGradeId = ''
    };

    let changeGrade = (id) => {
      let itemText = data.awardGradeyList.find((item) => item.itemValue == id).itemText;
      data.search.awardGrade = itemText;
    };

    // 详情
    let handleDetail = (row) => {
      data.flag = 3;
      data.id = row.id;
      data.infoDialogxq = true;
    };

    let changeDialogxq = (value) => {
      data.id = "";
      // 分页刷新列表
      data.infoDialogxq = false;
    }

    // 解锁
    let getUnlockBtn = async () => {
      if (data.ids.length == 1) {
        Modals("是否解锁选择内容", "提示", "warning")
          .then(async () => {
            let res = await getUnlock(data.ids);
            if (res.data.success) {
              tips("解锁成功", "success");
              getTableList();
            }
          })
          .catch(() => {
            console.log("点击了取消");
          });
      } else if (data.ids.length == 0) {
        tips("请选择", "warning");
      } else {
        tips("解锁功能不可批量操作", "warning");
      }
    };
    //  锁定
    let getLockBtn = async () => {
      if (data.ids.length == 1) {
        let flag = true
        console.log(data.selectedRows, 'selectedRows')
        data.selectedRows.forEach((obj) => {
          if (obj.status == '0') {
            flag = false
          }
        })
        if (!flag) {
          ElMessage({
            message: '请确认后再进行锁定',
            type: 'warning',
          })
          return
        }
        Modals("是否锁定选择内容", "提示", "warning")
          .then(async () => {
            let res = await getLock(data.ids);
            if (res.data.success) {
              tips("锁定成功", "success");
              getTableList();
            }
          })
          .catch(() => {
            console.log("点击了取消");
          });
      } else if (data.ids.length == 0) {
        tips("请选择", "warning");
      } else {
        tips("锁定功能不可批量操作", "warning");
      }
    };

    // 导出功能的实现

    let getExportBtn = () => {
      let msg = '是否导出全部数据'
      if(data.ids.length>0){
        msg = '是否导出所选数据'
      }
      Modals(msg, "提示", "warning")
          .then(async () => {
            const params = {
              ...data.search,
              ids: data.ids
            }
          await getExport(params, "科技奖项");
        })
        .catch(() => {
          console.log("点击了取消");
        });
    };
    // 确定当前流程
    let handleConfirm = async (row) => {
      Modals("是否确认当前流程", "提示", "warning")
        .then(async () => {
          let res = await getConfirm({ id: row.id });
          if (res.data.success) {
            getTableList();
          }
        })
        .catch(() => { });
    };

    // 批量删除

    const handleDetect = async () => {
      if (data.ids.length) {
        Modals("是否删除选择内容", "提示", "warning")
          .then(async () => {
            let res = await getDelect(data.ids);
            if (res.data.success) {
              tips("删除成功", "success");
              getTableList();
            }
          })
          .catch(() => {
            console.log("点击了取消");
          });
      } else {
        tips("请选择", "warning");
      }
    };

    // 获取列表信息
    let getTableList = () => {
      data.isLoading = true
      getTable({
        current: data.pagination.page,
        size: data.pagination.limit,
        ...data.search,
      }).then((res) => {
        (data.tableDate = res.data.data.records),
          (data.pagination.total = res.data.data.total);
        data.isLoading = false;
      }).catch(err=>{
          data.isLoading = false;
        });
    };

    // 分页

    let currentChange = (current) => {

      data.pagination.page = current;

      getTableList();
    };

    const sizeChange = (size) => {
      console.log(size)
      data.pagination.limit = size
      getTableList()
    }
    const getCurrentList = (currentList) => {
      console.log(currentList, 'getCurrentList')
      data.selectedRows = currentList
    }
    // 获取ids

    let delectIds = (ids) => {
      data.ids = ids;
    };

    // 人员列表
    let getUnitList = () => {
      getUnit({}).then((res) => {
        data.unitNameList = res.data.data;
      });
    };

    //  用户列表
    let getCodeList = () => {

      getDictionary([

        "KHGL_KJSL_HJJB",
        "KJSL_AWARD_CATEGORY",
        "KJSL_AWARD_LEVEL",
      ]).then((res) => {
        data.awardLevelList = res.data.data.KHGL_KJSL_HJJB;
        // data.awardCategoryList = res.data.data.KJSL_AWARD_CATEGORY;
        // data.awardGradeyList = res.data.data.KJSL_AWARD_LEVEL;
        // data.awardGradeyList = res.data.data.KJSL_AWARD_LEVEL;//之前的和注释一起的
      });

    };

    // 新增
    let handleAdd = () => {
      data.flag = 1;

      data.infoDialog = true;
    };
    // 编辑

    let handleEdit = (row) => {
      data.flag = 2;
      data.id = row.id;
      data.infoDialog = true;
    };

    let changeDialog = (value) => {
      data.id = "";
      // 分页刷新列表
      data.infoDialog = false;
      getTableList()
    };

    return {
      ...toRefs(data),
      store,
      handleEdit,
      handleAdd,
      changeDialog,
      getTableList,
      getLockBtn,
      getExportBtn,
      getUnlockBtn,
      getCurrentList,
      delectIds,
      handleConfirm,
      handleDetect,
      currentChange,
      sizeChange,
      handleDetail,
      changeDialogxq,
      changeLevel,
      changeClass,
      changeGrade,
    };
  },
};
</script>
<style lang="scss" scoped>
.container {
  background-color: white;
  padding: 20px;
}
</style>
